<template>
    <div class="about">
      <transition
        enter-active-class="animated fadeInLeft"
        leave-active-class="animated fadeOutLeft" mode="out-in" appear>
        <div>
          <h1>请求许愿数据</h1>
          <NavBar></NavBar>
          <ul>
            <li v-for="(item, index) in list" :key="index">
              {{item.id}}
              {{item.vow_detail}}
              <van-button type="primary" @click="doZanTo(index, item.id)">祝福</van-button>
            </li>
          </ul>
          <van-button type="primary" size="large" @click="getOtherListInfo">增加</van-button>
        </div>
      </transition>

      <div class="tabbar-box">
        <van-tabbar v-model="active">
          <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
          <van-tabbar-item icon="location-o" to="/login">登录</van-tabbar-item>
          <van-tabbar-item icon="qr" to="/about">关于</van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
</template>

<script>
import { listInfo, doZan } from "@/api/listInfo";
import { Button, Tabbar, TabbarItem } from "vant";
import NavBar from "@/components/NavBar";

export default {
  name: "login",
  data() {
    return {
      active: 2
    };
  },
  components: {
    "van-button": Button,
    "van-tabbar": Tabbar,
    "van-tabbar-item": TabbarItem,
    NavBar
  },
  computed: {
    list() {
      return this.$store.state.listInfo;
    }
  },
  created() {
    this.getListInfo();
  },
  mounted() {},
  methods: {
    getOtherListInfo() {
      this.getListInfo();
    },
    getListInfo() {
      listInfo({
        detailId: 14
      })
        .then(res => {
          this.$store.commit("getListInfo", res.data.data.newlist);
        })
        .catch(err => {
          console.log(err);
        });
    },
    doZanTo(index, id) {
      doZan({
        detailId: id
      })
        .then(res => {
          console.log(res.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
